<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>新增报修</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="../../css/font.css">
    <link rel="stylesheet" href="../../css/xadmin.css">
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <script src="../../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../js/xadmin.js"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!--导航栏开始-->
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a>
              <cite>导航元素</cite>
            </a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<!--导航栏结束-->
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <!--数据表格开始-->
                <div class="layui-card-body">
                    <!-- <div style="width: 30%;"> -->
                    <table class="layui-hide" id="repair" lay-filter="repair" ></table>
                    <!-- </div> -->
                    <div style="display: none;" id="repairBar">
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon"></i>删除</a>
                    </div>

                    <div style="display: none;" id="repairToolBar">
                        <div class="layui-btn-container">
                            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="add">报修</button>
                            <!--                                <button type="button" class="layui-btn layui-btn-sm" lay-event="getSelect">得到选中行</button>-->
                            <button type="button" class="layui-btn layui-btn-sm" lay-event="reloadTable">刷新表格</button>
                        </div>
                    </div>
                </div>
                <!--数据表格结束-->
            </div>
        </div>
    </div>
</div>

</body>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/app.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.23.0/moment.min.js" type="text/javascript" charset="utf-8"></script>

<script>
    layui.use(['jquery','layer','table','form'], function(){
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var form = layui.form;
        var user = app.getUserGlobalInfo();

        var tableIns = table.render({
            elem: '#repair' //渲染的目标对象
            ,url:app.ServerUrl+'v1/feedback/queryRepairByUserId?userId='+user.userId //数据接口
            ,method:'get'
            ,title:'repair' //数据导出标题
            ,toolbar: "#repairToolBar" //表头的工具条
            ,defaultToolbar:['filter','print']
            // ,width: 500
            // ,height: 300
            // ,height: 'full-300'
            ,cellMinWidth: 100 //设置列的最小默认宽度
            ,done: function(res,curr,count){
                // alert(res);//后台url返回的json串
                // alert(curr);//当前页
                // alert(count)//数据总条数
            }
            ,totalRow: true //开启合并行
            ,page:true  //是否开启分页
            ,limit:10  //设置每页显示的条数
            ,limits: [3,5,10]
            // ,loading: true  //是否显示加载条
            ,text:{
                none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
            }
            ,parseData: function(res){ //res 即为原始返回的数据
                var result;
                // console.log(this);
                //console.log(JSON.stringify(res));
                if(this.page.curr){
                    result = res.objs[0].slice(this.limit*(this.page.curr-1),this.limit*this.page.curr);
                }else{
                    result = res.objs[0].slice(0,this.limit);
                }
                return {
                    "resultStatus":res.resultStatus,//解析状态码
                    "resultIns":res.resultIns, //解析数据状态信息
                    "count": res.objs[0].length, //解析数据长度
                    "data": result //解析数据列表
                };
            }
            ,response: {
                statusName: 'resultStatus',
                statusCode: 1,
                msgName: 'resultIns',
            }
            ,cols: [[ //列数据
                {type: 'checkbox', fixed: 'left'}
                ,{type: 'numbers'}
                ,{field: 'deviceImei', title: '报修设备',width: 150,align:'center'}
                ,{field: 'reparationerId', title: '报修者ID',width: 100, align:'center'}
                ,{field: 'handleProgress', title: '报修进程',width: 150, align:'center', templet: function (d) {
                       // console.log(d.handleProgress);
                        switch (d.handleProgress) {
                            case '1':
                                return '未处理';
                            case '2':
                                return '县区未通过';
                            case '3':
                                return '县区通过';
                            case '4':
                                return '市级未通过';
                            case '5':
                                return '市级通过';
                        }
                    }}
                ,{field: 'reparationTaking', title: '报修信息', width:550,  align:'center'}
                ,{field: 'right', title: '操作',toolbar: '#repairBar', width: 150, align: 'center',fixed: 'right'}
            ]]
        });

        //监听头部工具栏事件
        table.on('toolbar(repair)', function(obj){
            switch(obj.event){
                case 'add':
                    layer.open({
                        type: 2,
                        title: false,
                        area: ['500px', '350px'], //宽高
                        content: 'repair-add.html', //打开新增公告页面
                    });
                    break;
                case 'reloadTable': //异步刷新表格
                    tableIns.reload({
                        url: app.ServerUrl+'v1/feedback/queryRepairByUserId?userId='+user.userId
                    });
                    break;
            }
        });

        table.on('tool(repair)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if (layEvent === 'del') { //删除
                layer.confirm('真的删除该报修么', function () {
                    $.ajax({
                        url: app.ServerUrl + 'v1/feedback/deleteRepairByReparationId',
                        type: "post",
                        data: {
                            reparationId: obj.data.reparationId,
                        },
                        async: false,//true 异步请求（默认）；false 同步请求
                        dataType: "json",
                        // headers: {
                        //     "Authorization": "460bcdb0-b326-4d6d-ac99-232c83ba6d80"
                        // },
                        success: function (res) {
                            //请求成功之后的操作，res是成功后的数据
                            if (res.resultStatus == 1) {
                                layer.msg('已删除!', {icon: 1, time: 1000});
                            } else {
                                alert("删除失败！！！");
                            }
                        },
                        error: function (res) {
                            //请求失败之后的操作，res是失败后的数据
                            console.log(res)
                        },
                    });
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    //向服务端发送删除指令
                });
            }
        });

    });
</script>
</html>